<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="css/font-awesome.min.css" type="text/javascript" rel="stylesheet">
<link href="css/bootsnav.css" type="text/css" rel="stylesheet">
<link href="css/normalize.css" type="text/css" rel="stylesheet">
<link href="css/css.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery.step.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/bootsnav.js" type="text/javascript"></script>

<script src="js/jquery.js" type="text/javascript"></script>
<!--[if IE]><script src="js/html5.js"></script><![endif]-->
<title>注册</title>
</head>

<body class="logobg_style">
	<div id="large-header" class="large-header login-page">
		<canvas id="demo-canvas" width="1590" height="711"></canvas>
		<div class="Retrieve_style">
			<div class="Retrieve-content step-body" id="myStep">
				<h1 class="title_name">用户注册</h1>
				<div class="step-header">
					<ul>
						<li>
							<p>输入电话</p>
						</li>
						<li>
							<p>确认密码</p>
						</li>
						<li>
							<p>成功</p>
						</li>
					</ul>
				</div>
				<div class="step-content">
					<div class="step-list login_padding">
						<form role="form" id="form_login" class="">
							<div class="form-group clearfix">
								<div class="input-group col-lg-8 col-md-8 col-xs-8">
									<div class="input-group-addon">
										<i class="icon_phone"></i>
									</div>
									<!-- 手机号 -->
									<input type="text" class="form-control text_phone" name="phone" id="phone" placeholder="你的手机号" autocomplete="off">
								</div>
								<div class="col-lg-4 col-md-4 col-xs-4 fl">
									<!-- 发送验证码 -->
									<input type="button" id="sms-input" class="btn_mfyzm" value="获取验证码" onclick="SendSMS()" />
								</div>
							</div>
							<div class="form-group clearfix">
								<div class="input-group">
									<div class="input-group-addon">
										<i class="icon_yanzhen"></i>
									</div>
									<!-- 输入验证码 -->
									<input type="text" class="form-control" name="Verification" id="sms-code" placeholder="短信验证码" autocomplete="off">
								</div>
							</div>
							<div class="tishi"></div>
						</form>
						<div class="form-group">
							<!-- 下一步按钮 -->
							<button disabled="disabled" class="btn btn-danger btn-block btn-login" id="applyBtn">下一步</button>
						</div>

					</div>
					<div class="step-list">
						<form method="post" role="form" id="" class="login_padding">
							<div class="form-group clearfix">
								<div class="input-group">
									<div class="input-group-addon">
										<i class="icon_password"></i>
									</div>
									<input type="password" class="form-control" name="password" id="password" placeholder="重置密码" autocomplete="off">
								</div>

							</div>
							<div class="form-group clearfix">
								<div class="input-group">
									<div class="input-group-addon">
										<i class="icon_password"></i>
									</div>
									<input type="password" class="form-control" name="confirmpwd" id="confirmpwd" placeholder="再次密码" autocomplete="off">
								</div>
							</div>
							<div class="tishis"></div>
							<div class="form-group">
								<a href="javascript:void(0);" type="submit" class="btn btn-danger btn-block btn-login" id="submitBtn">下一步</a>
							</div>
						</form>
					</div>
					<div class="step-list">
						<div class="ok_style center">
							<h2>
								<img src="images/ok.png">
							</h2>
							<h5 class="color2 mtb20">
								你已成功注册会员
								<b id="sec">5</b>
								秒后跳转到首页
							</h5>
							<a href="JavaScript：ovid()" class="btn btn-danger">首页</a>
							<a href="JavaScript：ovid()" class="btn btn-primary">从新注册</a>
						</div>
					</div>
					<form hidden="hidden" id="lain_form" th:action="@{~/userRegister}">
						<input  id="lain_username" name="phone">
						<input  id="lain_password" name="password">
					</form>
				</div>
			</div>
		</div>
	</div>
	<script src="js/TweenLite/TweenLite.min.js"></script>
	<script src="js/TweenLite/EasePack.min.js"></script>
	<script src="js/TweenLite/rAF.js"></script>
	<script src="js/TweenLite/demo-1.js"></script>
	<script src="js/layer/layer.js"></script>
	<script type="text/javascript" th:inline="javascript">
		var time = 30;
		var InterValOjb;
		
		//页面加载完成的时候就会调用
		window.onload = function()
		{
			document.getElementById("applyBtn").disabled = true;
		}
		
		function timer()
		{
			if(time == 0)
			{
				//layer.msg("成功");	
				time = 30;
				$("#sms-input").val("获取验证码");
				document.getElementById("sms-input").disabled = false
				//删除定时器
				window.clearInterval(InterValOjb);
			}else{
				time--
				//layer.msg(time+"秒")
				$("#sms-input").val(time+"秒")
			}
			
			
		}
		
		var sms;
		
		function SendSMS(){
			//alert("fasdfasd")
			//获取用户输入的手机
			var telephone = $("#phone").val();
			//alert(telephone);
			if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(telephone))){ 
				layer.msg("手机号码有误，请重填");  
			    return; 
			}
			//发送Ajax请求
			$.post(
				//发送的url
				[[@{~/sms}]],
				//数据
				{"phone":telephone},
				//回调
				function(data)
				{
					if(data.message)
					{
						$("#lain_username").val(telephone)
						layer.msg("验证码发送成功~请注意查收~")
						sms = data.sms;						
					}else{
						layer.msg("该手机号已被注册~")		
					}
					
				},
				//数据格式
				"json"
			)
			
			//设置按钮不能继续点击
			$("#sms-input").attr("disabled","true")
			//每隔1000ms就调用一次这个timer方法
			InterValOjb = window.setInterval(timer,1000);
		}

		//验证码的离焦事件
		$("#sms-code").blur(function(){
			
			//判断验证码是否正确
			var smsCode = $("#sms-code").val();
			//layer.msg(smsCode)
		    
			//如何去拿到真正的验证码
			//var sms = [[${session.sms}]];
			if(smsCode==sms)
			{
				layer.msg("验证码正确");
				document.getElementById("applyBtn").disabled = false;
			}else{
				layer.msg("验证码输入有误，请重新输入")
				 $("#sms-code").focus();
			}
		});

	</script>
</body>
</html>
